<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="app">
        <h1>这是 - {{title}}</h1>
        <input type="text" v-model="title">
        <p><input type="text" v-model="arr.name">{{arr}}</p>
        <p><input type="text" v-model="arr.child.name">{{arr}}</p>
        <input type="button" @click="change" value="修改"><span>{{msg}}</span>
        <p ref="p1">{{abc}}</p>
    </div>
</body>
<script src="../vue.global.js"></script>
<script>
    const { createApp, ref, reactive, watch, watchEffect } = Vue;

    createApp({
        setup(){
            const title = ref("计算属性");
            const msg = ref("hello");
            const arr = reactive({
                name:"张三",
                child:{
                    name:"李四"
                }
            });
            const p1 = ref(null);
            const abc = ref("hahaha");

            // 侦听响应式基本数据
            watch(title, (n, o)=>{
                console.log("新值为：", n)
                console.log("老值为：", o)
            });
            
            // 侦听响应式复杂数据，并立即执行一次回调函数
            watch(arr, (n, o)=>{
                console.log("新值为：", n)
                console.log("老值为：", o)
                console.log(n === o);
            },{
                immediate: true
            })


            // getter形式的函数：有返回值的函数
            // 深层次的侦听
            watch(()=>msg, (n, o)=>{
                console.log("新值为：", n)
                console.log("老值为：", o)
                console.log(n === o);
            },{
                deep: true
            })
            function change(){
                msg.value = "world";

                abc.value = "heiheihei";

            }


            watch(abc, (n, o)=>{
                console.log(n)
                console.log(p1.value.innerHTML);
            },{
                flush:"post"
            });

            // 立即执行的侦听器
            // 凡是在回调函数中使用到的数据，都会被监听
            watchEffect(()=>{
                console.log("-----");
                console.log(msg.value);
                console.log(abc.value);
                console.log("-----");
            });


            return { title, arr, change, msg, abc, p1 }
        }
    }).mount(".app");

</script>
</html>